import React, { Component } from 'react';
import { Modal, Form, Input, InputNumber, Select, message } from 'antd';
import fetchRequest from '../../fetch/fetchRequest';

const FormItem = Form.Item;
const { Option } = Select;

class AddForm extends Component {
    state = {}
    componentWillMount() {
        fetchRequest.fetchR('users', 'GET')
            .then((response) => {
                const userList = response.filter(item => (item.username !== 'admin' && item.username !== 'admin_1'))
                this.setState({
                    userList
                })
            }).catch((err) => {  //网络请求失败返回的数据
                message.error('用户数据获取失败')
            });
    }
    // 单选框的选项
    getOptionList(data) {
        if (!data) {
            return [];
        }
        let options = [];
        data.forEach((item) => {
            options.push(<Option value={item.username} key={item.id}>{item.username}</Option>)
        })
        return options
    }

    // 校验订单号
    checkName = (rule, value, callback) => {
        const { dataSource } = this.props;
        var reg = /(^\s+)|(\s+$)/g;
        if (value) {
            for (var i = 0; i < dataSource.length; i++) {
                if (dataSource[i].orderNumber === value) {
                    callback("此订单已存在，请重新设置！")
                }
            }
        } else {
            callback('请输入订单号!');
        }
        if (reg.test(value)) {
            callback('包含空格!');
        }
        callback();
    };

    handleChange = (value) => {
        const body = { username: value }
        // 获取对应用户的第一次佣金，没有就自定义，有就直接显示并使用
        fetchRequest.fetchR('firstMoney/username', 'POSt', body)
            .then((response) => {
                this.setState({
                    firstCommission: response.firstCommission,
                    firstPrincipal: response.firstPrincipal,
                })
                this.props.selectedUser(response);
            }).catch((err) => {
                message.error('用户数据获取失败')
            });
    }

    render() {
        const { addModalVisible, addCancel, addOk, form } = this.props;
        const { getFieldDecorator } = form;
        const FormItemLayout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 16 },
        };
        return (
            <Modal
                visible={addModalVisible}
                title='添加订单'
                okText='添加'
                cancelText='取消'
                onCancel={addCancel}
                onOk={addOk}
            >
                <Form layout="horizontal">
                    <FormItem label="订单号" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderNumber', {
                            rules: [{ required: true, validator: this.checkName }],
                        })(
                            <Input />
                        )}
                    </FormItem>
                    <FormItem label="用户名" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入用户名！' }],
                        })(
                            <Select
                                showSearch
                                style={{ width: 200 }}
                                placeholder="选择一个用户"
                                optionFilterProp="children"
                                onChange={this.handleChange}
                                filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            >
                                {this.getOptionList(this.state.userList)}
                            </Select>
                        )}
                    </FormItem>
                    <FormItem label="本金" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderPrincipal', {
                            rules: [{ required: true, message: '请输入数值类型的本金！' }],
                            initialValue: this.state.firstPrincipal
                        })(
                            <InputNumber />
                        )}
                    </FormItem>
                    <FormItem label="佣金" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderCommission', {
                            rules: [{ required: true, message: '请输入数值类型的佣金！' }],
                            initialValue: this.state.firstCommission
                        })(
                            <InputNumber />
                        )}
                    </FormItem>
                    <FormItem label="备注" {...FormItemLayout} hasFeedback>
                        {getFieldDecorator('orderRemarks')(
                            <Input />
                        )}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}

const AddModal = Form.create()(AddForm);
export default AddModal;